<template>
  <div id="dlhj_line" :style="{ width: '100%', height: '235px', backgroundColor: '#fff' }"></div>
</template>
<script>
import echarts from 'echarts'
let echartData = {}
const colors = ['#FF9900', '#1989FA']
export default {
  data() {
    return {}
  },
  props: ['chartsData'],
  watch: {
    chartsData: {
      // 正确给 cData 赋值的 方法
      deep: true,
      handler(newVal, oldVal) {
        echartData = newVal
      }
    }
  },
  mounted() {
    echartData = this.chartsData
    var myChart = echarts.init(document.getElementById('dlhj_line'))
    const option = {
      color: colors,
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        }
      },
      grid: {
        top: '40px',
        right: '5%',
        left: '4%',
        bottom: '20px'
      },
      toolbox: {
        feature: {
          dataView: { show: false, readOnly: false },
          restore: { show: false },
          saveAsImage: { show: false }
        }
      },
      legend: {
        data: ['item1', 'item2'],
        bottom: 0
      },
      xAxis: [
        {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          data: echartData.times
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '温度(℃)',
          position: 'left',
          axisLine: {
            lineStyle: {
              color: colors[0]
            }
          },
          max: 50,
          axisLabel: {
            formatter: '{value} '
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#eee'],
              width: 1,
              type: 'solid'
            }
          }
        },
        {
          type: 'value',
          name: '湿度(%)',
          position: 'right',
          axisLine: {
            lineStyle: {
              color: colors[1]
            }
          },
          max: 100,
          axisLabel: {
            formatter: '{value} '
          },

          splitLine: {
            show: true,
            lineStyle: {
              color: ['#eee'],
              width: 1,
              type: 'solid'
            }
          }
        }
      ],
      series: [
        {
          name: '温度',
          type: 'line',
          smooth: true,
          data: echartData.temperature
        },
        {
          name: '湿度',
          type: 'line',
          smooth: true,
          yAxisIndex: 1,
          data: echartData.humidity
        }
      ]
    }
    myChart.setOption(option)
    window.addEventListener('resize', function() {
      //   让我们图表调用resize方法
      myChart.resize()
    })
  }
}
</script>
